<template>
  <div class="emp_info">
    <section class='section'>
      <div class="emp_info_head">
        <div class="info_img">
          <img :src="srcImg" height="100%" style="border-radius:50%;" alt="">
        </div>
        <div class="info_txt">
          <div class="txt_main">
            <h1>{{emplInfo && emplInfo.name}}</h1>
            <div><span class="txts">{{emplInfo && emplInfo.sex_descr}}</span><span class="txts">{{emplInfo && emplInfo.mar_desc}}</span><span class="txts">{{emplInfo && emplInfo.ethnic_grp}}</span><span class="txts">{{emplInfo && emplInfo.birthdate | timeFormat(0,10)}}{{getAge()}}</span></div>
            <a  @click="goResumeUrl" target="_blank">进入个人履历</a>
          </div>
          <h2>{{emplInfo && emplInfo.position_desc}}</h2>
          <div class="basic_info">
            <div class="basic_left" style="">
              <ul class="basic_list">
                <li class="basic_items">
                  <span class="info_name">电话</span>
                  <span class="info_val">{{emplInfo && emplInfo.busn_mobile}}</span>
                </li>
                <li class="basic_items">
                  <span class="info_name">邮箱</span>
                  <span class="info_val">{{emplInfo && emplInfo.email_addr}}</span>
                </li>
                <li class="basic_items">
                  <span class="info_name">籍贯</span>
                  <span class="info_val">{{emplInfo && emplInfo.native_place_chn}}</span>
                </li>
                <li class="basic_items">
                  <span class="info_name">出生地</span>
                  <span class="info_val">{{emplInfo && emplInfo.birthplace}}</span>
                </li>
              </ul>
            </div>
            <div class="basic_right">
              <ul class="basic_list">
                <li class="basic_items">
                  <span class="info_name">最高学历</span>
                  <span class="info_val">{{emplInfo && emplInfo.highest_edu}}</span>
                </li>
                <li class="basic_items">
                  <span class="info_name">最高学位</span>
                  <span class="info_val">{{emplInfo && emplInfo.highest_deg}}</span>
                </li>
                <li class="basic_items">
                  <span class="info_name">毕业院校</span>
                  <span class="info_val">
                    <b>{{emplInfo && emplInfo.school_descr}}</b>
                    
                  </span>
                </li>
                <li class="basic_items">
                  <span class="info_name">专业</span>
                  <span class="info_val">
                    <b>{{emplInfo && emplInfo.major_descr}}</b>
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="emp_info_footer">
        <div>
        	<!--<router-link class="salary-btn target-btn" to="/mySalary"> 我的工资</router-link>-->
          <a class="salary-btn target-btn" href="#/mySalary" target="_blank" >我的工资</a>
          <span class="vacation-btn target-btn" @click="popVacation" >查看假期</span>
          <!--<router-link class="salary-btn target-btn" to="/mySend"> 我的工资</router-link>-->
          <a class="leave-btn target-btn" href="#/mySend" target="_blank">发起休假</a>
          <span class="report-btn target-btn" v-if="reportPlatform" @click="ToLeaderHome('1')" >报表平台</span>
          
          <span class="leader-btn target-btn" v-if="leaderPortal" @click="ToLeaderHome('2')">领导门户</span>
      		<span class="report-btn target-btn" v-if="holidayPlatform" @click="ToSetting" >系统设置</span>
        </div>
      </div>
    </section>
    <v-dialog :dialogVisible.sync="vacationVisible"></v-dialog>
    
  </div>
</template>

<script>
import Vue from "vue";
import { Button } from "element-ui";
import VDialog from "@/components/public/vacation";
Vue.use(Button);
export default {
  name: "emp_info",
  props: ["emplInfo",'urlTarget','reportPlatform','leaderPortal','holidayPlatform','srcImg'],
  data() {
    return {
      vacationVisible: false,
      emplid: null,

    };
  },
  mounted() {


  },
  methods: {
  	
  	ToSetting:function(){
  		 this.$router.push('/backStageManager/vacaManage');
  	},
  	
  	ToLeaderHome:function(type){
  		
  		 var newTab;
  		
			 if (location.hostname === "10.5.0.137" || location.hostname === "localhost") {
			 			newTab=window.open('about:blank');
				 		newTab.location.href=location.origin + '/#/home/homepage';
				 		return;
			 }
  		
  		if (localStorage.getItem('para') == 'undefined' || !localStorage.getItem('para')) {
  			 return;
  		}

			var params = JSON.parse(localStorage.getItem('para'));
			
			newTab=window.open('about:blank');
			
			this.Axios.Post(this.URL.getURL.url,params).then(res=>{
					
					// if (location.hostname === "10.5.0.137" || location.hostname === "localhost") {
					// 	this.$router.push('/home/homepage');
					// 	return;
					// }
					
					
				  if (!res.data.datas ) {
				  		newTab.location.href=location.origin + '/#/home/homepage';
//				  	  this.$router.push('/home/homepage');
				  } else {
				  	 
				  	 if (type == '1' && res.data.datas.reportUrl) {
				  	 			newTab.location.href=res.data.datas.reportUrl.trim();

				  	 		
//				  	 	  window.open(res.data.datas.reportUrl.trim());
//				  	 		location.href = res.data.datas.reportUrl.trim();
				  	 } else if (type == '2' && res.data.datas.urlToLeader) {
//				  	 		setTimeout(() => {
//				  	 			newTab.location.href=res.data.datas.reportUrl.trim();
//				  	 		},10)
				  	 		newTab.location.href = res.data.datas.urlToLeader.trim();
//				  	 		window.open(res.data.datas.urlToLeader.trim());
//				  	 		location.href = res.data.datas.urlToLeader.trim();
				  	 }
				  	  
				  }
			})
			
  	},
  	
    getAge() {
      if (this.emplInfo && this.emplInfo.birthdate) {
        let Data = new Date();
        let year = Data.getFullYear();
        let age = "";
        let birthYear = this.emplInfo && this.emplInfo.birthdate.substr(0, 4);
        return Number(year) - Number(birthYear)
          ? "(" + (Number(year) - Number(birthYear)) + ")"
          : "";
      }
    },
    goResumeUrl() {
      localStorage.setItem('resumeType',1)
      window.open("/module/resume.html");
    },
    popVacation() {
      this.vacationVisible = true;
    }
  },
  components: {
    "v-dialog": VDialog
  },
  computed: {

  },
  filters: {
    timeFormat: function(value, start, length) {
      if (value) {
        return value.substr(start, length).replace(/-/g, ".");
      }
    }
  }
};
</script>

<style scoped>
.emp_info_head {
  border-bottom: 1px solid #ecf0f5;
  height: 220px;
  padding: 13px 0px 0;
}
.emp_info_footer .target-btn {
  display: inline-block;
  margin-right: 25px;
  border-radius: 25px;
  color: #fff;
  padding: 0 15px;
  height: 26px;
  line-height: 26px;
}
.emp_info_footer .target-btn:hover {
  cursor: pointer;
}
.salary-btn {
  background: #5fb3f9;
}
.vacation-btn {
  background: #22ceb8;
}
.leave-btn {
  background: #a991f2;
}
.report-btn {
  background: rgba(212, 42, 13, 0.72);
}
.leader-btn {
  background: #5fb3f9;
}
.info_img {
  width: 168px;
  height:168px;
  float: left;
  margin-top: 10px;
  margin-left: 20px;
}
.info_txt {
  width: calc(100% - 190px);
  float: right;
}
.info_txt .txt_main {
  height: 50px;
  line-height: 50px;
  position: relative;
}
.info_txt a:hover {
  cursor: pointer;
}
.info_txt .txt_main h1 {
  float: left;
  font-size: 25px;
  margin-right: 20px;
}
.info_txt .txt_main .txts {
  margin-right: 13px;
  font-size: 14px;
}
.info_txt .txt_main a {
  position: absolute;
  right: 20px;
  top: 0;
  color: #38f;
}
.info_txt h2 {
  font-size: 15px;
}
.basic_info {
  overflow: hidden;
  margin: 15px 0 0;
}
.basic_info .basic_left {
  width: 43%;
  float: left;
}
.basic_info .basic_items {
  height: 25px;
  line-height: 25px;
}
.basic_info .basic_items .info_name {
  display: inline-block;
  width: 25%;
  text-align: right;
  font-size: 13px;
  color: #999;
}
.basic_info .basic_items .info_val {
  padding-left: 10px;
  font-size: 13px;
}
.basic_info .basic_right {
  width: 50%;
  float: left;
}
.basic_info .info_val b {
  margin-right: 10px;
  font-weight: 100;
}
.emp_info_footer {
  padding-top: 30px;
  text-align: center;
}
.emp_info_footer .el-button {
  border-radius: 25px;
  height: 28px;
  padding: 0;
  color: #fff;
  border: 1px solid #fff;
}
.emp_info_footer span, .emp_info_footer a{
  display: block;
  padding: 0 15px;
  height: 26px;
  line-height: 26px;
}
.emp_info_footer .wages {
  background: #5fb3f9;
}
.emp_info_footer .wages:hover {
  background: #4392d3;
}
.emp_info_footer .Cvacation {
  background: #22ceb8;
}
.emp_info_footer .Cvacation:hover {
  background: #1ca997;
}
.emp_info_footer .launch {
  background: #a991f2;
}
.emp_info_footer .launch:hover {
  background: #876bdb;
}
.emp_info_footer .leader {
  background: #5fb3f9;
}
.emp_info_footer .leader:hover {
  background: #408fd0;
}
</style>
